<template>
  <view>
    <view class="u-page">
      <u-sticky>
        <view class="common-top-searchbar">
          <u-search
            v-model="searchKeyValue"
            :show-action="false"
            shape="square"
          ></u-search>
        </view>
      </u-sticky>
      <view class="tree-list">
        <!-- <my-u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange"> -->
        <my-u-collapse :value="expandValue" :select-type="true">
          <treeItem
            :list="treeData"
            :show-count="true"
            :do-filter="true"
            :select-type="true"
            :show-lwicon="showLwIcon"
            ref="mySelectTree"
            @onItemClick="handlerItemClick"
          ></treeItem>
        </my-u-collapse>
        <!-- </my-u-checkbox-group> -->
      </view>
      <view class="chooseItems common-bottom-block flex-center">
        <view class="text1"
          >已选择 <text>（{{ parentData.checkedList.length }}）</text>：</view
        >
        <!-- <view id="iconScroll"> -->
        <view class="icons" v-if="showLwIcon">
          <view
            class="item"
            v-for="(item, index) in parentData.checkedList"
            :key="item.id"
          >
            <textIcon :lwicon="item.icon" :lwtext="item.label"></textIcon>
          </view>
        </view>
        <view class="icons" v-else>
          <view
            class="item text"
            v-for="(item, index) in parentData.checkedList"
            :key="item.id"
          >
            {{ item.label }}
          </view>
        </view>
        <!-- </view> -->
        <view class="confirm">
          <u-button type="primary" @click="confirmSelect" :disabled="!hasData"
            >完成</u-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import treeItem from "@/components/treeItem/index.vue";
import textIcon from "@/components/textIcon/index.vue";
import sceneMixins from "@/utils/sceneMixins";
import _ from "lodash";

export default {
  name: "tree-select-page",
  components: {
    treeItem,
    textIcon,
  },
  mixins: [sceneMixins],
  options: { styleIsolation: "shared" },
  data() {
    return {
      searchKeyValue: "",
      expandValue: ["*"],
      treeData: [],
      multity: true,
      searchAble: false,
      filterAble: true,
	  rwlx:'',
	  ssgdId:'',
      parentData: {
        checkedList: [],
      },
      showLwIcon: false,
      hasData: false,
    };
  },
  onLoad(options) {
    var vm = this;
    console.log("🚀 ~ file: index.vue:69 ~ onLoad ~ options:", options);
    this.loadApi = options.loadApi;
	this.rwlx=options.rwlx;
	this.ssgdId=options.ssgdId
    this.loadList();

    //   var params = JSON.parse(decodeURIComponent(options.query || '%7B%7D'));
    //   if (params.title) {
    //     uni.setNavigationBarTitle({
    //       title: params.title
    //     });
    //   }
    //   _.assign(this, params);
    //   if (!this.loadApi) {
    //       this.loadApi = '/api/miniapp/v1/getGrid.jsp?isAll=N';
    //       this.paramsMap = {'label': 'name', children: 'child'};
    //       this.showLwIcon = false;
    //   }else{
    // 	  this.loadApi=options.loadApi
    // 	  this.loadList();
    //   }
    //    this.waitVariable("token").then(() => {
    //    });
  },
  mounted() {},
  watch: {
    searchKeyValue: function () {
      this.filterAble && this.treeData.forEach(this.filterFoo);
    },
    "parentData.checkedList": function (v) {
      this.$refs.mySelectTree.updateChecker();
      this.hasData = v.length;
    },
  },
  methods: {
    checkboxChange: function (a) {
      console.log(a);
    },
    loadList: function () {
      var vm = this;
      uni.showLoading();
      vm.getAndLoad('列表', vm.loadApi+"?rwlx="+vm.rwlx+"&ssgd="+vm.ssgdId, function (res) {
        uni.hideLoading();
        // if (vm.paramsMap) {
        //   res = vm.parseResult(res);
        // }
        console.log(res);
        var treeData = res.data;
        console.log("🚀 ~ file: index.vue:143 ~ treeData:", treeData)

        vm.treeData = treeData;
        console.log("🚀 ~ file: index.vue:147 ~ vm.treeData:", vm.treeData)
      });
		
    //   var treeData = [
    //     {
    //       id: "320312002000",
    //       label: "参建方",
    //       open: false,
	// 	  type:'cjf',
    //       children: [
    //         {
    //           id: "320312002007",
    //           label: "参建员工1",
    //           open: false,
	// 		  type:'cjf',
    //         },
    //       ],
    //     },
    //     {
    //       id: "320312002001",
    //       label: "科员",
    //       open: false,
    //       show: false,
	// 	  type:'ky',
    //       children: [
    //         {
    //           id: "320312002002",
    //           label: "科员1",
	// 		  type:'ky',
    //           show: false,
    //         },
    //       ],
    //     },
    //     {
    //       id: "320312002006",
    //       label: "建管员工",
    //       open: false,
    //       show: true,
	// 	  type:'jgyg',
    //       children: [
    //         {
    //           id: "320312002005",
    //           label: "建管员工1",
	// 		  type:'jgyg',
    //           show: true,
    //         },
    //       ],
    //     },
    //   ];
      //           treeData.forEach(vm.filterFoo);
      //   treeData.forEach(vm.initItem);
    //   vm.treeData = treeData;
    },
    parseResult: function (res) {
      var resStr = JSON.stringify(res);
      var keys = Object.keys(this.paramsMap);
      var values = Object.values(this.paramsMap);
      values.forEach((v, i) => {
        resStr = resStr.replaceAll('"' + v + '":', '"' + keys[i] + '":');
      });
      return JSON.parse(resStr);
    },
    filterFoo: function (item) {
      var kv = this.searchKeyValue || "";
      if (item.children) {
        item.children.forEach(this.filterFoo);
        item.show = item.children.some((n) => n.show);
      } else {
        item.show = !this.filterAble || !kv || item.label.includes(kv.trim());
      }
    },
    initItem: async function (item) {
      if (item.children) {
        item.children.forEach(this.initItem);
        item._checked = item.children.every((n) => n._checked);
      } else {
        item._checked = false;
      }
    },
    handlerItemClick: function (item) {
      this.$emit("itemClick", item);
    },
    confirmSelect: function () {
      var pages = getCurrentPages();
      var currPage = pages[pages.length - 1]; //当前页面
      var prevPage = pages[pages.length - 2]; //上一个页面
      console.log(
        "🚀 ~ file: index.vue:186 ~ this.parentData.checkedList:",
        this.parentData.checkedList
      );
      // #ifdef H5
      prevPage.$vm.query = val; //h5写法
      // #endif
      //#ifdef MP-WEIXIN||MP-QQ
      prevPage.setData({
        callBackData: this.parentData.checkedList,
      }); //小程序写法
      // #endif

      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-list {
  background: #fff;
  margin-top: 20rpx;
  padding-bottom: 124rpx;
}
.chooseItems {
  padding: 20rpx;
  width: 750rpx;
  box-sizing: border-box;
  justify-content: space-between;
  /deep/ {
    .text1 {
      font-size: 28rpx;
      font-weight: bold;
      min-width: 210rpx;
    }
    .icons {
      display: flex;
      align-items: center;
      flex-grow: 1;
      overflow-x: scroll;
      margin-right: auto;
      // justify-content: flex-end;
      .item {
        display: flex;
        align-items: center;
        margin-right: 10rpx;
        image {
          border-radius: 10rpx;
          width: 60rpx;
          height: 60rpx;
        }
        &.text {
          white-space: nowrap;
          border: 1px solid #ffb100;
          padding: 5rpx;
          border-radius: 5px;
          margin: 5px 5px 5px 0;
        }
      }
    }
    .confirm {
      min-width: 140rpx;
      margin-left: 10rpx;
      button {
        height: 65rpx;
      }
    }
  }
}
</style>